<template>
    <div class="km-menu km-menu-{{attr.type}}">
        {#html attr.options}
    </div>
</template>
<script>
    export default function() {

        let event = new Event(this);// 事件派发

        let attr = this.reactive({
            options: "",
            type: 'horizontal', // 默认水平菜单
        })

        // 递归生成HTML
        this.getHtml = (data) => {
            let html = ''
            data.forEach((item) => {
                html += `<div class="km-menu-item" data-event="click,handleSelect" value='${JSON.stringify(item)}'>`
                html += `<div class="km-menu-trigger">`
                html += `<span>${item.text}</span>`
                if (item.child) {
                    html += `<svg t="1757318454718" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4520"
                                width="32" height="32">
                                <path d="M283.648 174.081l57.225-59.008 399.479 396.929-399.476 396.924-57.228-59.004 335.872-337.92z"
                                    fill="#272636" p-id="4521"></path>
                            </svg>`
                }
                html += `</div>`
                if (item.child) {
                    
                    // 递归生成子菜单HTML
                    html += `<div class="km-menu-submenu">`
                    html += this.getHtml(item.child)
                    html += `</div>`
                }
                html += `</div>`
            })
            return html
        }

        // 打开子菜单
        this.handleSelect = (e,item) => {
            let value =  JSON.parse(item.getAttribute('value'));
            let submenu = item.querySelector('.km-menu-submenu');
            if(submenu){
                item.classList.toggle('km-show');
            }
            event.emit('select', value);
            e.stopPropagation();
        }

        // 监听属性变化
        this.attred = (name, oldValue, newValue) => {
            console.log(name, oldValue, newValue);
            if ((name === 'options' || name === 'type') && newValue !== oldValue) {
                try {
                    if (name === 'options') {
                        attr.options = this.getHtml(newValue);
                    } else if (name === 'type') {
                        attr.type = newValue;
                    }
                } catch (error) {
                    console.error(error);
                }
            }
        }

        this.cleaned = ()=>{
            event.destroy();
        }
    }
</script>
<style>
    .km-menu {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 4px;
        background-color: var(--white);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow-005);
        width: min-content;
        /* overflow: hidden; */
    }

    .km-menu-trigger{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        width: 100%;
        align-items: center;
    }

    .km-menu-submenu {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--white);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow-005);
        transition: var(--transition);
        z-index: 10;
        transform: translateY(15px);
    }

    .km-menu-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
        position: relative;
        box-sizing: border-box;
        border-radius: 4px;
    }

    .km-menu-item:hover {
        background-color: var(--gray-shallow);
        transition: var(--transition);
    }

    .km-menu-item svg {
        width: 16px;
        height: 16px;
        transition: var(--transition);
    }

    .km-show>.km-menu-submenu{
        opacity: 1;
        visibility: visible;
        transform: translateY(10px);
    }

    .km-menu-submenu .km-menu-submenu{
        top: 0;
        left: calc(100% + 5px);
    }

    .km-show>.km-menu-trigger svg{
        transform: rotate(90deg);
    }

    /* 垂直菜单样式 */
    .km-menu-vertical {
        flex-direction: column;
        width: 230px;
        padding: 8px;
        border-radius: 4px;
        box-shadow: var(--box-shadow-005);
        transition: all 0.3s ease;
    }
    
    /* 垂直菜单样式 */
    .km-menu-vertical .km-menu-item {
        padding: 8px 12px;
        width: 100%;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
    }

    /* 垂直菜单子菜单样式 */
    .km-menu-vertical .km-menu-submenu {
        position: unset;
        box-shadow: none;
        width: 100%;
        box-sizing: border-box;
        max-height: 0;
        overflow: hidden;
        transition: var(--transition);
        background-color: unset;
    }

    .km-menu-vertical .km-show > .km-menu-submenu {
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
        transition: var(--transition);
        margin-top: 8px;
    }

    .km-menu-vertical .km-show {
        background-color: #b6b6b6cb;
    }

</style>